<template>
  <d2-container>
    <template slot="header">客户管理</template>
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="单位名称">
        <el-input v-model="form.user" placeholder="单位名称" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleCreateCustomerClick" size="mini">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" size="mini">导出</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="400">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="单位名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="客户联系人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="业务组"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="业务员"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="统一社会引用代码"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="contractList(scope.$index)"
              type="text"
              size="small">
              合同
            </el-button>
            <el-button
              @click.native.prevent="handleEdit(scope.$index, tableData)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="20"
        layout="total, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import api from '@/api'

export default {
  name: 'user',
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      var res = await api.MARKET_CUSTOMER_LIST({
        pageNo: 1,
        pageSize: 10
      })
      this.count = res.count
      this.tableData = res.list
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    onSubmit () {
      console.log('submit!')
    },
    handleCreateCustomerClick () {
      this.$router.push({ name: 'market-customer-create' })
    },
    handleEdit (index, row) {

    },
    handleDelete (index, row) {

    },
    contractList () {
      this.$router.push({ name: 'market-customer-contract' })
    }
  },
  data () {
    return {
      currentPage: 1,
      count: 0,
      tableData: [],
      form: {
        id: '',
        user: ''
      }
    }
  }
}
</script>
